<template>
	<gui-page>
		<template v-slot:gBody>
			<cardHeader :title="`${mc}(${total})`"></cardHeader>
			<view v-for="(item, index) in items" :key="item.id"
				class="gui-card-view gui-bg-white gui-dark-bg-level-3 gui-margin-top gui-box-shadow">
				<view class="gui-card-body gui-border-b gui-flex gui-rows gui-nowrap">
					<text v-if="item.online == 1" class="gui-list-icon gui-icons gui-color-green">&#xe61f;</text>
					<text v-if="item.online == 0" class="gui-list-icon gui-icons gui-color-gray">&#xe61f;</text>
					<view class="gui-card-desc">
						<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
							<text class="gui-card-name gui-primary-text">{{item.devname}}-{{item.mc}}</text>
							<text class="gui-text-small gui-primary-color">{{item.devtype}}</text>
						</view>
						<text class="gui-card-text gui-block gui-secondary-text"
							style="margin-top:10rpx;">{{item.info}}</text>
						<text class="gui-card-text gui-block gui-third-text">{{item.update_time}}</text>
					</view>
				</view>
				<view class="gui-card-footer gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
					<text @click="gotodevicedetail(item)"
						class="gui-icons gui-primary-color gui-card-footer-item gui-border-r">&#xe624; 设备详情</text>
					<text @click="gotoRTData(item)"
						class="gui-icons gui-primary-color gui-card-footer-item gui-border-r">&#xe609; 实时数据</text>
					<text @click="gotoHisData(item)" class="gui-icons gui-primary-color gui-card-footer-item">&#xe614;
						历史数据</text>
				</view>
				<view v-if="item.iscanjd == 1"
					class="gui-card-footer gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
					<text @click="gotojdinfo(item)"
						class="gui-icons gui-color-red gui-card-footer-item gui-border-r">&#xe687; 设备节电节能详情</text>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import { ref,getCurrentInstance,createApp } from 'vue'
	import cardHeader from "@/lib/components/card-header.vue"
	import { onLoad,onPullDownRefresh } from "@dcloudio/uni-app"
	import guiPage from "@/Grace6/components/gui-page.vue"
	import ybmethod from '../../lib/js/ybmethod'
	import ybgolbal from '../../lib/js/ybgolbal'
	const app = createApp();
	const ybapi = ybgolbal.getybapi(getCurrentInstance());   // 定义与后端接口进行交互的变量
	let total = ref(0);   // 产品对应下的设备总数
	let productid = ref(0);   // 产品id
	let mc = ref("");   // 设备名称
	let items = ref([]);   // 产品对应下的设备列表
	let page = ref(1);   // 页数
	let perpage = ref(20);  // 分割成几页
	
	onLoad((option)=>{
		console.log("进入设备页面");
		console.log(option);
		console.log(productid.value)
		productid.value = option.productid;
		mc.value = option.mc;
		getData();
	})
	
	onPullDownRefresh(()=>{
		ybmethod.onPullDownRefresh(getData);
	})
	
	function getData(){
		ybapi.Devices_GetDevices(productid.value,page.value,perpage.value,function(data){
			console.log(data.items)
			items.value = data.items;
			total.value = data.total;
		},function(e){
			console.log(e);
		});
	}
	
	function gotoHisData(item) {
		console.log(item);
		// 跳转历史数据
		uni.navigateTo({
			url: "/pages/hisdata/hisdata?devid=" + item.id + "&ctbb=" + item.ctbb + "&xlh=" + item
				.xlh + "&devname=" + item.devname + "&mc=" + item.mc + "&devtype=" + item.devtype,
		});
	}
	
	function gotodevicedetail(item){
		console.log(item);
		// 跳转设备详情
		uni.navigateTo({
			url: "/pages/devicedetail/devicedetail?devid=" + item.id + "&ctbb=" + item.ctbb + "&xlh=" +
				item.xlh + "&devname=" + item.devname + "&mc=" + item.mc + "&devtype=" + item.devtype,
		});
	}
	
	function gotoRTData(item){
		console.log(item);
		// 跳转实时数据
		uni.navigateTo({
			url: "/pages/rtdata/rtdata?devid=" + item.id + "&ctbb=" + item.ctbb + "&xlh=" + item.xlh +
				"&devname=" + item.devname + "&mc=" + item.mc + "&devtype=" + item.devtype,
		});
	}
	
	function gotojdinfo(item){
		console.log(item);
		// 跳转节能
		uni.navigateTo({
			url: "/pages/jdinfo/jdinfo?devid=" + item.id + "&ctbb=" + item.ctbb + "&xlh=" + item.xlh +
				"&devname=" + item.devname + "&mc=" + item.mc + "&devtype=" + item.devtype,
		});
	}
	
	app.component({
		cardHeader,
		guiPage
	});
</script>

<style>
	@import "../../lib/css/ybcard.css";   
</style>
